import { IRouteComponentProps, NavLink } from 'umi'
import { Layout, Menu } from 'antd'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  AccountBookFilled,
  SearchOutlined,
  BarChartOutlined,
  UserOutlined,
  SettingOutlined
} from '@ant-design/icons';
import layoutStyle from './index.css';
import React, { useState } from 'react';
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;
const whiteLists = ['/login']
export default function GlobalLayout({ children, location, route, history, match }: IRouteComponentProps) {
  // console.log('location...', location)
  if (whiteLists.indexOf(location.pathname) !== -1) {
    return children
  }
  const [collapsed, setcollapsed] = useState(false)
  function toggle() {
    setcollapsed(!collapsed)
  }
  return (
    <>
      <Layout className={layoutStyle.layout}>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className={layoutStyle.logo}>
            <img
              src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png"
              alt=""
            />
            {collapsed ? null : <span>电商运营后台</span>}
          </div>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            {/* 1. 首页 */}
            <Menu.Item key="1" icon={<AccountBookFilled />}>
              <NavLink to="/">
                <span>首页</span>
              </NavLink>
            </Menu.Item>
            {/* 产品管理 */}
            <SubMenu
              key="sub1"
              title={
                <span>
                  <AccountBookFilled />
                  <span>产品管理</span>
                </span>
              }
            >
              {/* 2.1  分组管理 */}
              <Menu.Item key="2" icon={<AccountBookFilled />}>
                <NavLink to="/management">
                  <span>分组管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.2  产品管理 */}
              <Menu.Item key="3" icon={<AccountBookFilled />}>
                <NavLink to="/management">
                  <span>产品管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.3 分类管理 */}
              <Menu.Item key="4" icon={<AccountBookFilled />}>
                <NavLink to="/sortManagement">
                  <span>分类管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.4 评论管理 */}
              <Menu.Item key="5" icon={<AccountBookFilled />}>
                <NavLink to="/labelManagement">
                  <span>评论管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.5 规格管理 */}
              <Menu.Item key="6" icon={<AccountBookFilled />}>
                <NavLink to="/labelManagement">
                  <span>规格管理</span>
                </NavLink>
              </Menu.Item>
            </SubMenu>
            {/* 门店管理 */}
            <SubMenu
              key="sub2"
              title={
                <span>
                  <AccountBookFilled />
                  <span>门店管理</span>
                </span>
              }
            >
              {/* 2.2  所有文章 */}
              <Menu.Item key="7" icon={<AccountBookFilled />}>
                <NavLink to="/management">
                  <span>公告管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.3 热搜管理 */}
              <Menu.Item key="8" icon={<AccountBookFilled />}>
                <NavLink to="/sortManagement">
                  <span>热搜管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.4 轮播图管理 */}
              <Menu.Item key="9" icon={<AccountBookFilled />}>
                <NavLink to="/labelManagement">
                  <span>轮播图管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.4 运费管理 */}
              <Menu.Item key="10" icon={<AccountBookFilled />}>
                <NavLink to="/labelManagement">
                  <span>运费管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.4 自提点管理 */}
              <Menu.Item key="11" icon={<AccountBookFilled />}>
                <NavLink to="/labelManagement">
                  <span>自提点管理</span>
                </NavLink>
              </Menu.Item>
            </SubMenu>
            {/* 会员管理 */}
            <SubMenu
              key="sub3"
              title={
                <span>
                  <AccountBookFilled />
                  <span>会员管理</span>
                </span>
              }
            >
              {/* 2.2  会员管理 */}
              <Menu.Item key="12" icon={<AccountBookFilled />}>
                <NavLink to="/management">
                  <span>会员管理</span>
                </NavLink>
              </Menu.Item>
            </SubMenu>
            {/* 订单管理 */}
            <SubMenu
              key="sub4"
              title={
                <span>
                  <AccountBookFilled />
                  <span>订单管理</span>
                </span>
              }
            >
              {/* 2.2  订单管理 */}
              <Menu.Item key="13" icon={<AccountBookFilled />}>
                <NavLink to="/management">
                  <span>订单管理</span>
                </NavLink>
              </Menu.Item>
            </SubMenu>
            {/* 系统管理 */}
            <SubMenu
              key="sub5"
              title={
                <span>
                  <AccountBookFilled />
                  <span>系统管理</span>
                </span>
              }
            >
              {/* 2.2  地址管理 */}
              <Menu.Item key="14" icon={<AccountBookFilled />}>
                <NavLink to="/management">
                  <span>地址管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.3 管理员管理 */}
              <Menu.Item key="15" icon={<AccountBookFilled />}>
                <NavLink to="/sortManagement">
                  <span>管理员管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.4 角色管理 */}
              <Menu.Item key="16" icon={<AccountBookFilled />}>
                <NavLink to="/labelManagement">
                  <span>角色管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.4 菜单管理 */}
              <Menu.Item key="17" icon={<AccountBookFilled />}>
                <NavLink to="/labelManagement">
                  <span>菜单管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.4 定时任务 */}
              <Menu.Item key="18" icon={<AccountBookFilled />}>
                <NavLink to="/labelManagement">
                  <span>定时任务</span>
                </NavLink>
              </Menu.Item>
              {/* 2.4 参数管理 */}
              <Menu.Item key="19" icon={<AccountBookFilled />}>
                <NavLink to="/labelManagement">
                  <span>参数管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.4 系统日志 */}
              <Menu.Item key="20" icon={<AccountBookFilled />}>
                <NavLink to="/labelManagement">
                  <span>系统日志</span>
                </NavLink>
              </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header
            style={{
              background: '#fff',
              padding: '0 1rem',
              alignItems: 'center',
              width: '100%',
              display: 'block',
            }}
          >
            {
              collapsed ?
                <MenuUnfoldOutlined style={{ float: 'left', lineHeight: '4rem' }} onClick={toggle} /> :
                <MenuFoldOutlined style={{ float: 'left', lineHeight: '4rem' }} onClick={toggle} />
            }
            {/* <Icon
              className="trigger"
              type={collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={toggle}
              style={{ float: 'left', lineHeight: '4rem' }}
            /> */}
            <div className={layoutStyle.headerrigin}>
              {/* {user ? (
                JSON.parse(user).avatar ? (
                  <img src={JSON.parse(user).avatar} alt="" />
                ) : (
                  <Avatar icon="user" />
                )
              ) : null}
              <span style={{ paddingLeft: '1rem' }}>Hi!{user ? JSON.parse(user).name : null}</span> */}
            </div>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            {children}
          </Content>
        </Layout>
      </Layout>
    </>
  );
}
